<!DOCTYPE html>
<html>
<head>
    <% include ../../web/jingpeng/meta.html %>
    <% include global/top-css.html %>
    <title></title>
</head>
<body>
        
        <% include ../../web/jingpeng/header.html %>
        
        <section class="row">
            <img class="wauto" src="/static/web/jingpeng/img/news.jpg" alt="">
        </section>
        
        <div class="row wrap-content page-c mt-30">
            <% include global/nav-aside.html %>
            <div class="flex pd-10 flex">
                <form action="/user/my/update" method="post" name="update" @submit.prevent="checkAddForm" >
                    <ul>
                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label c-999" for="#">用&nbsp; 户&nbsp; 名：</label>
                            </div>
                            <div class="col-bd">
                                <div class="col-bd c-666">
                                   <%=data.user%>
                                </div>
                            </div>
                        </li>
                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label c-999" for="#">性　　别：</label>
                            </div>
                            
                            <div class="col-bd c-666">
                                <%if(data.sex==1){%>
                                男<input type="radio" name="sex" id="" class="radio pos-r t-4 mr-5 ml-10 " checked="checked" value="1">
                                女<input type="radio" name="sex" id="" class="radio pos-r t-4 mr-5 ml-10" value="2">
                                <%}else{%>
                                    男<input type="radio" name="sex" id="" class="radio pos-r t-4 mr-5 ml-10" value="1">
                                 女<input type="radio" name="sex" id="" class="radio pos-r t-4 mr-5 ml-10" checked="checked" value="2">
                                <%}%>
                            </div>
                        </li>
                        <li class="row pd-10 f-14">
								<div class="col-hd">
									<label class="label c-999" for="#">头　　像：</label>
								</div>
								
								<div class="col-bd row c-666">
									<input type="hidden" name="face" id="" class="input" :value="img" />
									<div class="toxiang pos-r">
										<img v-if="img"  class="toxiang-img" :src="img" width="120" height="80" alt="">
										<span class="bianji"></span>
									</div>
									<input @change="sendThumb" type="file" name="img" id="thumb">

								</div>
								<div class="col-ft c-999 none">
									(选填，缩略图必须是jpg,gif,png,并且100k之内)
								</div>
							</li>
                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label c-999" for="#">工作单位：</label>
                            </div>
                            
                            <div class="col-bd">
                                <input type="text" class="input border c-666" name="workplace" id="" class="input" value="<%=data.workplace%>" />
                            </div>
                        </li>
                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label c-999" for="#">手机号码：</label>
                            </div>
                            
                            <div class="col-bd row">
                                <input type="text" name="tel" id="" class="input order f-14 c-666" style="width:280px" readonly="readonly" value="<%=data.tel%>" />
                                <a class="c-666" href="/user/safe">更换号码</a>
                            </div>
                        </li>
                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label c-999" for="#">省&nbsp; 市&nbsp; 区：</label>
                            </div>
                            <div class="col-bd">
                            	<div data-toggle="distpicker" id="distpicker">
								  <select data-province="<%=data.province%>" name="province" class="mr-10 c-666"></select>
								  <select data-city="<%=data.city%>" name="city" class="mr-10 c-666"></select>
								  <select data-district="<%=data.area%>" name="area" class="c-666"></select>
								</div>
                            </div>
                        </li>
                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label c-999" for="#">收货地址：</label>
                            </div>
                            <div class="col-bd">
                               <input type="text" class="input border c-666" name="address" placeholder="请填写地址" value="<%=data.address%>"/>
                            </div>
                        </li>

                        <li class="pd-10">
                                <div class="col-hd">
                                        <label class="label c-999" for="#">　　　　</label>
                                    </div>
                                    <div class="col-bd">
                              <input name="send" class="submit cursor mr-30" type="submit" value="保存"/>
                              <input name="send" class="reset cursour" type="reset" value="取消"/>
                            </div>
                        </li>
            
                    <ul>
                </form>
               
            </div>
        </div>
         <% include global/footer.html %>
         <% include global/footer-js.html %>
         <script src="/static/web/jingpeng/js/distpicker.data.min.js"></script>
         <script src="/static/web/jingpeng/js/distpicker.js"></script>
       
		 <script>
			 var vm = new Vue({
				 el:'.wrap-content',
				 data:{
                    img:'<%=data.face%>'
				 },
				 methods:{
					
					 ajax:function(){
					 
						 var _this = this;
						 $.ajax({
							 url: "/api/code",
							 type: "get",
							 dataType:'json',
							 success:function(data){
								
							 }
						 });
					 },
	 
					 checkAddForm:function(){
						 var _this = this;
						 var fm = document.update;
					
						 if(fm.province.value != '' && fm.address.val==''){
                            _this.$message('收货地址不能为空^_^');
							 fm.user.focus();
							 return false;
						 }
	 
						 fm.submit();
	 
                     },
                     sendThumb:function(){
                         var _this = this;
                         var formData = new FormData();
                         formData.append('file',$('#thumb')[0].files[0]);
                         var thumb = $('#thumb').val().split('.')[1];
                         
                         if(thumb != 'jpg' && thumb != 'gif' && thumb != 'jpeg' && thumb != 'png'){
                            _this.$message("请上传图片！");
                             return false;
                         }
                         if(($('#thumb')[0].files[0].size / 1000) > 100){
                            _this.$message('缩略图不能超过100k');
                             return false;
                         }
     
                         $.ajax({
                             url: "/user/my/thumb",
                             data:formData,
                             cache:false,
                             processData:false,
                             contentType:false,
                             type: "post",
                             dataType:'json',
                             success:function(data){
                                 _this.img = data.data[0];
                             }
                         });
                         return false;
                     },
				upload:function(){
					var _this = this;
					$('#thumb').on('change',function(e){
						_this.thumbname = $(this)[0].files[0].name
					});
					
					$('.mask').show();
					$('.mask').width();
					$('.mask').addClass('mask-visible').on('webkitTransitionEnd', function(){
					$(this).show();
					});
					$('.dialog').addClass('dialog-visible');
				

					$('.btn-block').on('click',function(){
						$('.mask').removeClass('mask-visible').on('webkitTransitionEnd', function(){
						$(this).hide();
						});
						$('.dialog').removeClass('dialog-visible');
					});

				}
					 
				 },
				 created:function(){
                    $("#distpicker").distpicker({
                        province: "浙江省",
                        city: "杭州市",
                        district: "西湖区"
                      });


				 },
				 mounted:function(){
					 
				 },
				 updated:function(){
					 
				 }
			 });
			 
		 </script>
</body>
</html>